<template>
  <div class="content-wrapper-view">
    <div class="content-wrapper-body">
      <div class="filter-wrapper"></div>

      <zk-table
        ref="table"
        sum-text="sum"
        index-text="#"
        :data="data"
        :columns="columns"
        :stripe="props.stripe"
        :border="props.border"
        :show-header="props.showHeader"
        :show-summary="props.showSummary"
        :show-row-hover="props.showRowHover"
        :show-index="props.showIndex"
        :tree-type="props.treeType"
        :is-fold="props.isFold"
        :expand-type="props.expandType"
        :selection-type="props.selectionType"
      >
        <template slot="$expand" scope="scope">
          {{
            `My name is ${scope.row.name},
                    this rowIndex is ${scope.rowIndex}.`
          }}
        </template>
        <template slot="likes" scope="scope">
          {{ scope.row.likes.join(",") }}
        </template>
      </zk-table>
    </div>
  </div>
</template>

<script>
import {
  created,
  updated,
  deleted,
  selectOne,
  selectList,
  selectTree
} from "@/api/system/menu";
export default {
  name: "Table",

  data() {
    return {
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false
      },
      data: [
        {
          name: "Jack",
          sex: "male",
          likes: ["football", "basketball"],
          score: 10,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10,
                  children: [
                    {
                      name: "Ashley",
                      sex: "female",
                      likes: ["football", "basketball"],
                      score: 20
                    },
                    {
                      name: "Taki",
                      sex: "male",
                      likes: ["football", "basketball"],
                      score: 10,
                      children: [
                        {
                          name: "Ashley",
                          sex: "female",
                          likes: ["football", "basketball"],
                          score: 20
                        },
                        {
                          name: "Taki",
                          sex: "male",
                          likes: ["football", "basketball"],
                          score: 10
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10
            }
          ]
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10
                }
              ]
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  likes: ["football", "basketball"],
                  score: 20
                },
                {
                  name: "Taki",
                  sex: "male",
                  likes: ["football", "basketball"],
                  score: 10
                }
              ]
            }
          ]
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20
        },
        {
          name: "Tom",
          sex: "male",
          likes: ["football", "basketball"],
          score: 20,
          children: [
            {
              name: "Ashley",
              sex: "female",
              likes: ["football", "basketball"],
              score: 20
            },
            {
              name: "Taki",
              sex: "male",
              likes: ["football", "basketball"],
              score: 10
            }
          ]
        }
      ],
      columns: [
        {
          label: "name",
          prop: "name",
          width: "400px"
        },
        {
          label: "sex",
          prop: "sex",
          minWidth: "50px"
        },
        {
          label: "score",
          prop: "score"
        },
        {
          label: "likes",
          prop: "likes",
          minWidth: "200px",
          type: "template",
          template: "likes"
        }
      ]
    };
  },
  computed: {
    propList() {
      return Object.keys(this.props).map(item => ({
        name: item
      }));
    }
  },
  methods: {
    getTree() {
      //获取菜单树
      this.loadingTree = true;
      selectTree().then(response => {
        this.tree = response.data.data;
        this.treeDialog = response.data.data;
        this.loadingTree = false;
      });
    }
  }
};
</script>

<style scoped>
</style>
